<template>
  <div class="service-nav-container">
    <h2 class="section-title">
      <el-icon><List /></el-icon>
      校园服务
    </h2>
    
    <div class="service-grid">
      <!-- 热心问答 -->
      <el-card 
        shadow="hover" 
        class="service-card qna-card" 
        @click="navigateTo('/service/qna')"
      >
        <div class="service-content">
          <div class="service-icon">
            <el-icon size="36px"><ChatDotRound /></el-icon>
          </div>
          <h3 class="service-title">热心问答</h3>
          <p class="service-desc">解答校园生活中的各种疑问</p>
        </div>
      </el-card>
      
      <!-- 表白墙 -->
      <el-card 
        shadow="hover" 
        class="service-card love-card" 
        @click="navigateTo('/service/love-wall')"
      >
        <div class="service-content">
          <div class="service-icon">
            <el-icon size="36px"><Star /></el-icon>
          </div>
          <h3 class="service-title">表白墙</h3>
          <p class="service-desc">分享你的心意与祝福</p>
        </div>
      </el-card>
      
      <!-- 新生必读 -->
      <el-card 
        shadow="hover" 
        class="service-card guide-card" 
        @click="navigateTo('/service/freshman-guide')"
      >
        <div class="service-content">
          <div class="service-icon">
            <el-icon size="36px"><School /></el-icon>
          </div>
          <h3 class="service-title">新生必读</h3>
          <p class="service-desc">新生入学指南与常见问题</p>
        </div>
      </el-card>
      
      <!-- 周边美食 -->
      <el-card 
        shadow="hover" 
        class="service-card food-card" 
        @click="navigateTo('/service/food')"
      >
        <div class="service-content">
          <div class="service-icon">
            <el-icon size="36px"><Goods /></el-icon>
          </div>
          <h3 class="service-title">周边美食</h3>
          <p class="service-desc">校园周边美食推荐</p>
        </div>
      </el-card>
      
      <!-- 二手市场 -->
      <el-card 
        shadow="hover" 
        class="service-card market-card" 
        @click="navigateTo('/service/second-hand')"
      >
        <div class="service-content">
          <div class="service-icon">
            <el-icon size="36px"><Coin /></el-icon>
          </div>
          <h3 class="service-title">二手市场</h3>
          <p class="service-desc">闲置物品交易平台</p>
        </div>
      </el-card>
      
      <!-- 失物招领 -->
      <el-card 
        shadow="hover" 
        class="service-card lost-card" 
        @click="navigateTo('/service/lost-found')"
      >
        <div class="service-content">
          <div class="service-icon">
            <el-icon size="36px"><Location /></el-icon>
          </div>
          <h3 class="service-title">失物招领</h3>
          <p class="service-desc">寻找丢失物品或归还拾得物品</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import {
  List, ChatDotRound, Star, School, Goods, Coin, Location
} from '@element-plus/icons-vue'

const router = useRouter()

const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.service-nav-container {
  margin: 40px 0;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  letter-spacing: 0.5px;
}

.section-title .el-icon {
  margin-right: 12px;
  font-size: 28px;
  color: #6c5ce7;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.service-card {
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  height: 100%;
  border-radius: 12px;
  border: none;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6c5ce7, #00cec9);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.service-card:hover::before {
  opacity: 1;
}

.service-content {
  padding: 28px 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.service-icon {
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.1);
}

.service-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: #2d3436;
  transition: color 0.3s ease;
}

.service-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #636e72;
  transition: color 0.3s ease;
}

/* 卡片个性化颜色 */
.qna-card .service-icon {
  color: #6c5ce7;
}
.qna-card:hover .service-title,
.qna-card:hover .service-desc {
  color: #6c5ce7;
}

.love-card .service-icon {
  color: #e84393;
}
.love-card:hover .service-title,
.love-card:hover .service-desc {
  color: #e84393;
}

.guide-card .service-icon {
  color: #00b894;
}
.guide-card:hover .service-title,
.guide-card:hover .service-desc {
  color: #00b894;
}

.food-card .service-icon {
  color: #fd79a8;
}
.food-card:hover .service-title,
.food-card:hover .service-desc {
  color: #fd79a8;
}

.market-card .service-icon {
  color: #fdcb6e;
}
.market-card:hover .service-title,
.market-card:hover .service-desc {
  color: #fdcb6e;
}

.lost-card .service-icon {
  color: #0984e3;
}
.lost-card:hover .service-title,
.lost-card:hover .service-desc {
  color: #0984e3;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .service-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
  
  .section-title {
    font-size: 20px;
  }
  
  .service-content {
    padding: 20px 15px;
  }
}
</style>